<template>
  <BaseDialog destroy-on-close fullscreen v-model="isShow" title="用户条件" @close="close" @confirm="confirm">
    <div class="w-full h-12 flex items-center border pl-2.5">
      <span>已选：</span>
      <div class="flex-1">
        {{ value }}
      </div>
    </div>
    <div class="w-full">
      <el-tabs v-model="name">
        <el-tab-pane label="用户" name="user">
          <div class="w-full" style="height: calc(100vh - 280px)">
            <SelectUser v-model="state.dataForm.user"></SelectUser>
          </div>
        </el-tab-pane>
        <el-tab-pane label="组织" name="org">
          <div class="w-full" style="height: calc(100vh - 280px)">
            <SelectOrg v-model="state.dataForm.org"></SelectOrg>
          </div>
        </el-tab-pane>
        <el-tab-pane label="角色" name="role">
          <div class="w-full" style="height: calc(100vh - 280px)">
            <SelectRole v-model="state.dataForm.role"></SelectRole>
          </div>
        </el-tab-pane>
        <el-tab-pane label="职位" name="post">
          <div class="w-full" style="height: calc(100vh - 280px)">
            <SelectPost v-model="state.dataForm.post"></SelectPost>
          </div>
        </el-tab-pane>
        <el-tab-pane label="关系" name="relation">
           <div class="w-full" style="height: calc(100vh - 280px)">
             <SelectRelation v-model="state.dataForm.relation"></SelectRelation>
           </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </BaseDialog>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import {formatUserData} from './ts/TaskExecute'
import SelectUser from './SelectUser.vue'
import SelectOrg from './SelectOrg.vue'
import SelectRole from './SelectRole.vue'
import SelectPost from './SelectPost.vue'
import SelectRelation from './SelectRelation.vue'

const emit = defineEmits(['callback'])
const name = ref("user")
const state = reactive({
  dataForm: {
    user: [],
    org: [],
    role: [],
    post: [],
    relation: []
  }
})
const value = ref('');
const isShow = ref(false)
const init = (data) => {
  state.dataForm = data
  isShow.value = true
}
const confirm = () => {
  emit('callback', state.dataForm, value.value)
  close()
}
const close = () => {
  isShow.value = false
}
watch(() => state.dataForm, (newValue) => {
  value.value = formatUserData(newValue)
}, {deep: true, immediate: true})
defineExpose({init})
</script>

<style scoped>

</style>